<template>
  <div class="app-container">

    <el-dialog :title="roomData.roomId+' - 房间流水'" :visible.sync="visiable" width="70%" append-to-body>
      <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
        <el-form-item label="用户" prop="payUserId">
          <el-input
            v-model="queryParams.payUserId"
            placeholder="请输入支付用户id"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        </el-form-item>
      </el-form>
      <el-tabs v-model="queryParams.transType" @tab-click="getList">
        <el-tab-pane label="礼物流水" :name="2">
          <el-table v-loading="loading" :data="socialTransList" >
            <el-table-column label="支付用户id" align="center" prop="payUserId" />
            <el-table-column label="赠送时间" align="center" prop="createTime" width="180">
              <template slot-scope="scope">
                <span>{{ scope.row.createTime?parseTime(scope.row.createTime):'--' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="礼物类别" align="center" prop="extra1" />
            <el-table-column label="猫粮值" align="center" prop="payAmount" />
            <el-table-column label="礼物名称" align="center" prop="payAmount" />
            <el-table-column label="赠送对象" align="center" prop="receiveUserId" />
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="充值流水" :name="1">
          <el-table v-loading="loading" :data="socialTransList" >
            <el-table-column label="用户昵称" align="center" prop="payUserId" />
            <el-table-column label="充值时间" align="center" width="180">
              <template slot-scope="scope">
                <span>{{ scope.row.createTime?parseTime(scope.row.createTime):'--' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="到账时间" align="center" width="180">
              <template slot-scope="scope">
                <span>{{ scope.row.payTime?parseTime(scope.row.payTime):'--' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="充值金额" align="center" prop="payAmount" />
            <!-- 0系统, 1支付宝, 2微信 -->
            <el-table-column label="支付方式" align="center" prop="payChannel">
              <template slot-scope="scope">
                <span v-if="scope.row.payChannel === 0 ">系统</span>
                <span v-else-if="scope.row.payChannel === 1 ">支付宝</span>
                <span v-else-if="scope.row.payChannel === 2 ">微信</span>
              </template>
            </el-table-column>
            <el-table-column label="充值性质" align="center" prop="extra1" />
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="开宝箱流水" :name="3">
          <el-table v-loading="loading" :data="socialTransList" >
            <el-table-column label="用户昵称" align="center" prop="payUserId" />
            <el-table-column label="开宝箱时间" align="center" width="180">
              <template slot-scope="scope">
                <span>{{ scope.row.createTime?parseTime(scope.row.createTime):'--' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="开宝箱价格" align="center" prop="extra1" />
            <el-table-column label="开出礼物" align="center" prop="extra2" />
            <el-table-column label="礼物价值" align="center" prop="extra3" />
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="赠送流水" :name="4">
          <el-table v-loading="loading" :data="socialTransList" >
            <el-table-column label="用户昵称" align="center" prop="payUserId" />
            <el-table-column label="开宝箱时间" align="center" width="180">
              <template slot-scope="scope">
                <span>{{ scope.row.createTime?parseTime(scope.row.createTime):'--' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="开宝箱价格" align="center" prop="extra1" />
            <el-table-column label="开出礼物" align="center" prop="extra2" />
            <el-table-column label="礼物价值" align="center" prop="extra3" />
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" 
        :limit.sync="queryParams.pageSize" @pagination="getList"/>
    </el-dialog>
  </div>
</template>

<script>
import { listSocialTrans } from "@/api/system/socialTrans";

export default {
  data() {
    return {
      roomData:{},
      visiable: false,
      loading: true,
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        transType: 2,
        roomId: undefined,
        payUserId: undefined
      },

      socialTransList:[]
    };
  },
  created() {
    
  },
  methods: {
    init(row){
      if(row.id){
        this.msgError("参数成功");
        return
      }
      this.roomData = row
      this.queryParams.roomId = row.id
      this.$nextTick(() => {
        this.getList();
      })
    },
    /** 查询交易流水列表 */
    getList() {
      this.loading = true;
      listSocialTrans(this.queryParams).then(response => {
        this.socialTransList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    }
  }
};
</script>